<template>
	<view class="">
		<view class="topBox" @tap="logout" :style="{paddingTop:jiaonangHight+'px',height:selectHeight+'px'}">
			<view class="topBox_title">
				医修智汇
			</view>
			<image src="../../static/index/top.png" mode=""></image>
			<!-- <view class="topBox_img">

			</view> -->
		</view>
		<view class="content">
			<!-- 输入框 -->
			<view class="content-input">
				<image src="../../static/serach.png" mode=""></image>
				<input type="text" placeholder="输入客户名称或者工单号或者序号"  disabled="true" @tap="jump_serach"
					placeholder-style="font-size: 28rpx;font-weight: 500;color: #C6C7CB;" value="" />
			</view>
			<view class="content-card">
				<view class="content-card-left">
					<view class="content-card-left-t">
						正在进行中
					</view>
					<view class="content-card-left-a">
						<text class="content-card-left-num">{{ongoing}}</text>
						<text class="">/单</text>
					</view>
				</view>
				<view class="content-card-right">
					<image src="../../static/index/name-icon.png" mode=""></image>
					<text>{{name_user}}</text>
				</view>
				<view class="content-card-btm">
					<view class="content-card-btm-box" @tap="jumpRepair(0)">
						<view class="content-card-btm-box-a">
							报修工单
						</view>
						<view class="content-card-btm-box-b">
							{{dara_}}
						</view>
					</view>
					<view class="content-card-btm-box" @tap="jumpRepair(1)">
						<view class="content-card-btm-box-a">
							维保工单
						</view>
						<view class="content-card-btm-box-b">
							{{maintenance}}
						</view>
					</view>
					<view class="content-card-btm-box" @tap="jumpRepair(2)">
						<view class="content-card-btm-box-a">
							质保期内
						</view>
						<view class="content-card-btm-box-b">
							{{period}}
						</view>
					</view>
				</view>
			</view>
			<view class="content-order">
				<view class="content-order-b" v-for="(item,index) in orderStatus" :key="index"
					@tap="jumpCheckout(item.id)">
					<view class="content-order-num">
						{{item.num}}
					</view>
					<view class="content-order-title">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="content-work">
				<view :class="['content-work-item',workId==item.id?'active':'']" v-for="(item,index) in work"
					:key='index' @tap="jumpWord(item.id)">
					{{item.title}}
				</view>
			</view>
			<block>
				<view class="content-detail" @tap="jumpDetail(item.id)" v-for="(item,index) in wordList" :key='index'>
					<view class="detail-top">
						<view class="left-name">
							{{item.hospital.name}}
						</view>
						<view class="right-name">
							{{item.type_data==0?'报修工单':'维保工单'}}
						</view>
					</view>
					<view class="product">
						<view class="product-name">
							产品名称：<text class="product-name-border">{{item.product}}</text>
						</view>
						<view class="product-name">
							设备型号：<text class="product-name-border">{{item.device}}</text>
						</view>
						<view class="product-name">
							工单ID：<text class="product-name-border">{{item.id}}</text>
						</view>
						<view class="product-name">
							当前指派：<text class="product-name-border">{{item.engineer.nickname||'暂无'}}</text>
						</view>
					</view>
					<view class="order-time">
						<view class="order-time-left">
							{{item.createtime}}
						</view>
						<view class="order-time-right">
							详情
						</view>
					</view>
				</view>
			</block>
			<block v-if="wordList.length==0">
				<view class="empty">
					<image src="../../static/empty.png" mode=""></image>
					<text>什么也没有哦...</text>
				</view>

			</block>
		</view>
		<button-btm>
			新建工单
		</button-btm>
	</view>

</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	import buttonBtm from '@/components/button-btm.vue'
	export default {
		components: {
			buttonBtm
		},
		data() {
			return {
				hospitalName: '', //医院名称
				dara_: 0, //报修工单数量
				name_user: '', //当前登录者 名字
				wordList: [], //底部列表
				ongoing: 0, //进行中
				maintenance: 0, //维保工单数量
				period: 0, //质保期内数量
				selectHeight: '', //顶部盒子高度，
				jiaonangHight: '', //胶囊顶部高度
				orderStatus: [{
					id: 1,
					num: 0,
					title: '今日新增',
				}, {
					id: 5,
					num: 0,
					title: '待验收',
				}, {
					id: 3,
					num: -1,
					title: '已完成',
				}, {
					id: 4,
					num: -1,
					title: '全部工单',
				}],
				workId: 0,
				work: [{
					id: 0,
					title: '指派给我',
				}, {
					id: 1,
					title: '进行中',
				}, {
					id: 2,
					title: '质保期内',
				}, {
					id: 3,
					title: '已完成',
				}],
				page: 1,
				last_page: 1
			}
		},
		watch: {
			//n新增  o旧值  监听 work选项
			workId(n, o) {
				this.getEngineerList()
				this.wordList = []
				this.page = 1
			}
		},
		onLoad() {
			/* 获取登陆者 姓名 */
			uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					this.name_user = res.data.nickname
				}
			})

		},
		onShow() {
			this.wordList = []
			this.page = 1
			this.last_page = 1
			/* 获取右上角胶囊高度 */
			this.getMenuHight()
			/* 获取首页数据 */
			this.getIndexData()
			/* 获取当前工程师工单列表 */
			this.getEngineerList()
		},
		methods: {
			/* 获取医院列表 */
			jump_serach() {
				uni.navigateTo({
					url:'../serach/serach'
				})
			},
			/* 获取首页数据 */
			getIndexData() {
				this.$https.post('/warranty/engineerNum').then(res => {
					this.orderStatus[3].num = res.data.all; //全部工单
					this.orderStatus[2].num = res.data.done; //已完成
					this.orderStatus[1].num = res.data.accepted; //待验收
					this.orderStatus[0].num = res.data.day_add; //今日新增
					this.maintenance = res.data.maintenance; //维保工单数量
					this.period = res.data.period; //质保期内数量
					this.ongoing = res.data.ongoing //进行中
					this.dara_ = this.orderStatus[3].num - this.maintenance
				})
			},
			/* 获取当前工程师工单列表 */

			getEngineerList() {
				this.$https.post('/warranty/engineerList', {
					status: this.workId,
					type: 3,
					page: this.page,
				}).then(res => {
					if (res.data.last_page != 0) {
						this.last_page = res.data.last_page
					}
					this.wordList = this.wordList.concat(res.data.data)
				})
			},
			/* 退出登录 */
			...mapMutations(['cleanStorage']),
			logout() {
				uni.showModal({
					title: '退出登录',
					content: '确定退出状态？',
					confirmText: '确定',
					success: res => {
						if (res.cancel) {} else if (res.confirm) {
							uni.clearStorageSync('userInfo')
							this.cleanStorage()
							uni.reLaunch({
								url: '../login/login'
							})
						}
					}

				})
			},
			/* 获取右上角胶囊高度 */
			getMenuHight() {
				let res = wx.getMenuButtonBoundingClientRect()
				this.selectHeight = res.height;
				this.jiaonangHight = res.top;
			},
			jumpWord(id) {
				this.workId = id
			},
			/* 创建订单 */
			btnJump() {
				wx.navigateTo({
					url: '../createOrder/createOrder'
				})
			},
			/* 订单详情 */
			jumpDetail(id) {
				wx.navigateTo({
					url: '../detail/detail?id=' + id
				})
			},
			/* 跳转维保工单   2质保期内   1维保工单*/
			jumpRepair(id) {
				wx.navigateTo({
					url: '../repair/repair?type=' + id
				})
			},
			/* 待验收 */
			jumpCheckout(id) {
				wx.navigateTo({
					url: '../checkout/checkout?type=' + id
				})
			}
		},
		onReachBottom() {
			if (this.page != this.last_page) {
				this.page = this.page + 1
				this.getEngineerList()
			}
		},
	}
</script>

<style scoped lang="scss">
	.empty {
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 50px;
		font-size: 12px;
		color: #B6BDBD;

		image {
			width: 75px;
			height: 100px;
		}
	}

	.topBox {
		position: sticky;
		top: 0px;
		z-index: 999;

		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #181818;
		padding-left: 32rpx;
		background-color: #FFFFFF;

		.topBox_title {
			padding: 0rpx;
			margin: 0rpx;
			float: left;
			margin-right: 10rpx;
			font-size: 32rpx;
		}

		.topBox_img {
			width: 32rpx;
			height: 32rpx;
			margin-left: 20rpx;

			vertical-align: middle;
		}

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.content-order-b {
		flex: 1;
		text-align: center;
		border-right: 2rpx solid #EDEEF2;
	}

	.content-order-b:last-child {
		border-right: none;
	}

	.content-order-num {
		font-size: 36rpx;
		font-weight: 600;
		color: #303030;
		line-height: 52rpx;
	}

	.content-order-title {
		font-size: 24rpx;
		font-weight: 400;
		color: #646466;
		line-height: 32rpx;
	}

	.content {
		padding: 28rpx 32rpx 200rpx;
		background-color: #f6f6fb;

		&-input {
			display: flex;
			align-items: center;
			height: 36rpx;
			background: #FFFFFF;
			border-radius: 44rpx;
			display: flex;
			padding: 26rpx 32rpx 26rpx 24rpx;
			display: flex;
			align-items: center;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 34rpx;
			}

			input {
				flex: 1;
			}
		}

		&-card {
			width: 100%;
			height: 316rpx;
			background: url(../../static/index/bgc-card.png);
			background-size: 100% 316rpx;
			margin: 28rpx 0 44rpx;
			position: relative;

			&-left {
				position: absolute;
				top: 38rpx;
				left: 40rpx;

				&-t {
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
				}

				&-num {
					font-size: 64rpx;
					font-family: DIN Alternate-Bold, DIN Alternate;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 64rpx;
					margin-right: 10rpx;
				}

				&-a {
					color: #FFFFFF;
					margin-top: 24rpx;
				}
			}

			&-right {
				position: absolute;
				top: 38rpx;
				right: 0px;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				background: rgba(255, 255, 255, .5);
				padding: 12rpx 30rpx 12rpx 24rpx;
				display: flex;
				align-items: center;
				border-radius: 32rpx 0px 0px 32rpx;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 18rpx;
				}
			}

			&-btm {
				position: absolute;
				width: 740rpx;
				left: -32rpx;
				bottom: 40rpx;
				display: flex;

				&-box {
					flex: 1;
					text-align: center;

					&-a {
						font-size: 24rpx;
						font-weight: 400;
						color: #a0bfff;
						margin-bottom: 12rpx;
					}

					&-b {
						font-size: 32rpx;
						font-family: DIN Alternate-Bold, DIN Alternate;
						font-weight: bold;
						color: #FFFFFF;
					}
				}
			}
		}

		&-order {
			width: 100%;
			height: 128rpx;
			background-color: #FFFFFF;
			border-radius: 8rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		&-work {
			display: flex;
			padding: 40rpx 0 46rpx;
			justify-content: space-between;

			&-item {
				text-align: center;
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #969699;
				line-height: 48rpx;
			}
		}
	}

	.active {
		font-size: 36rpx;
		font-weight: 550;
		color: #141414;
		line-height: 48rpx;
		position: relative;
	}

	.active::before {
		content: '';
		width: 60rpx;
		height: 8rpx;
		border-radius: 8rpx;
		background-color: $public-oclor;
		position: absolute;
		bottom: -16rpx;
		left: 50%;
		margin-left: -30rpx;
	}

	.active::after {
		content: '';
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
		background-color: $public-oclor;
		position: absolute;
		bottom: -16rpx;
		left: 50%;
		margin-left: -40rpx;
	}

	.content-detail {
		background-color: #FFFFFF;
		border-radius: 8rpx;
		margin-bottom: 32rpx;
	}

	.detail-top {
		display: flex;
		justify-content: space-between;
		padding: 22rpx 20rpx;
	}

	.left-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #303030;
	}

	.right-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #FFAB00;
		letter-spacing: 4rpx;
	}

	.product {
		padding: 20rpx;
		border-bottom: 2rpx solid #f6f6fb;
		border-top: 2rpx solid #f6f6fb;

		&-name {
			font-size: 24rpx;
			font-weight: 400;
			color: #969699;
			margin: 12rpx 0;

			&-border {
				color: #303030;
				font-weight: 500;
			}
		}
	}

	.order-time {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12rpx 20rpx;

		&-left {
			font-size: 24rpx;
			font-weight: 400;
			color: #646466;
		}

		&-right {
			padding: 12rpx 48rpx;
			background-color: $public-oclor;
			color: #FFFFFF;
			font-size: 28rpx;
			border-radius: 52rpx;
		}
	}
</style>
